<template>
  <div id="index">
    <dv-full-screen-container class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="d-flex jc-center">
          <dv-decoration-10 style="width: 33.3%; height: 0.0625rem" />
          <div class="d-flex jc-center">
            <dv-decoration-8
              :color="['#568aea', '#000000']"
              style="width: 2.5rem; height: 0.625rem"
            />
            <div class="title">
              <span class="title-text" style="color: #0085ff"
                >大数据可视化平台</span
              >
              <dv-decoration-6
                class="title-bototm"
                :reverse="true"
                :color="['#50e3c2', '#67a1e5']"
                style="width: 3.125rem; height: 0.1rem"
              />
            </div>
            <dv-decoration-8
              :reverse="true"
              :color="['#568aea', '#000000']"
              style="width: 2.5rem; height: 0.625rem"
            />
          </div>
          <dv-decoration-10
            style="width: 33.3%; height: 0.0625rem; transform: rotateY(180deg)"
          />
        </div>

        <!-- 第二行 -->
        <div class="d-flex jc-between px-2">
          <div class="d-flex" style="width: 40%">
            <div
              class="react-right ml-4"
              style="width: 2rem; text-align: left; background-color: #0f1325"
              @click="changeBtn"
            >
              <span class="react-before"></span>
              <span class="text" :class="{ colorBlue: isActive1 }"
                >作战态势</span
              >
            </div>
            <div
              class="react-right ml-3"
              style="background-color: #0f1325"
              @click="changeBtn2"
            >
              <span class="text" :class="{ colorBlue: isActive2 }"
                >地形分布</span
              >
            </div>
            <div
              class="react-right ml-3"
              style="background-color: #0f1325"
              @click="changeBtn3"
            >
              <span class="text" :class="{ colorBlue: isActive3 }"
                >地图数据</span
              >
            </div>
          </div>
          <div style="width: 40%" class="d-flex">
            <div class="react-left mr-3" style="background-color: #0f1325">
              <span class="text fw-b colorBlue" style="font-size: 27px">{{
                screenTitle
              }}</span>
            </div>
            <div
              class="react-left mr-4"
              style="
                width: 6.25rem;
                background-color: #0f1325;
                text-align: right;
              "
            >
              <span class="react-after"></span>
              <span class="text"
                >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
              >
            </div>
          </div>
        </div>

        <div class="body-box">
          <!-- 第三行数据 -->
          <div
            class="content-box"
            style="height: 10rem; border: 0px"
            v-if="one"
          >
            <dv-border-box-13 style="height: 100%; border: 0px">
              <DataBottomLeft
                v-if="isShowBtn == 1"
                style="height: 13rem; border: 0px"
              />

              <!--              <DataBottomRight-->
              <!--                -->
              <!--                style="height: 13rem; border: 0px"-->
              <!--              />-->

              <chinaMap v-if="isShowBtn == 3" />
            </dv-border-box-13>

            <dv-border-box-13 class="content-box2" style="height: 100%">
              <centerEX style="height: 6rem" />
              <center style="height: 6rem" />
            </dv-border-box-13>
          </div>

          <!--          &lt;!&ndash; 第四行数据 &ndash;&gt;-->
          <!--          <div class="bototm-box"  style="height: 5.6rem;">-->

          <!--            <dv-border-box-13>-->
          <!--              <DataBottomRight  />-->
          <!--            </dv-border-box-13>-->

          <!--            <dv-border-box-13>-->
          <!--              <center />-->
          <!--            </dv-border-box-13>-->

          <!--          </div>-->
          <o-index v-if="two"></o-index>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import centerLeft1 from "./centerLeft1";
import centerLeft2 from "./centerLeft2";
import centerRight1 from "./centerRight1";
import centerRight2 from "./centerRight2";
import center from "./center";
import bottomLeft from "./bottomLeft";
import bottomRight from "./bottomRight";
import DataBottomLeft from "./DataBottomLeft";
import DataBottomRight from "./DataBottomRight";
import chinaMap from "../../bigscreen/chinamap";
import centerEX from "./centerEX";
import OIndex from "../../components/erp/transport/oneIndex";
export default {
  data() {
    return {
      isActive1: true,
      isActive2: false,
      isActive3: false,
      one: true,
      two: false,
      loading: true,
      dateDay: "",
      dateYear: "",
      dateWeek: "",
      // weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      isShowBtn: 1,
      screenTitle: "作战态势",
    };
  },
  components: {
    OIndex,
    centerLeft1,
    centerLeft2,
    centerRight1,
    centerRight2,
    center,
    bottomLeft,
    bottomRight,
    DataBottomLeft,
    DataBottomRight,
    chinaMap,
    centerEX,
  },
  mounted() {
    this.timeFn();
    this.cancelLoading();
  },
  methods: {
    // qiehuanone(){
    //   this.one=true;
    //   this.two=false;
    // },
    // qiehuantwo(){
    //   this.one=false;
    //   this.two=true;
    // },
    timeFn() {
      setInterval(() => {
        let myDate = new Date();
        // console.log(myDate)
        let wk = myDate.getDay();
        let yy = String(myDate.getFullYear());
        let mm = myDate.getMonth() + 1;
        let dd = String(
          myDate.getDate() < 10 ? "0" + myDate.getDate() : myDate.getDate()
        );
        let hou = String(
          myDate.getHours() < 10 ? "0" + myDate.getHours() : myDate.getHours()
        );
        let min = String(
          myDate.getMinutes() < 10
            ? "0" + myDate.getMinutes()
            : myDate.getMinutes()
        );
        let sec = String(
          myDate.getSeconds() < 10
            ? "0" + myDate.getSeconds()
            : myDate.getSeconds()
        );
        let weeks = [
          "星期日",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
        ];
        let week = weeks[wk];
        this.dateDay = hou + ":" + min + ":" + sec;
        this.dateYear = yy + "年" + mm + "月" + dd + "日";
        this.dateWeek = week;
      }, 1000);
    },
    changeBtn() {
      this.screenTitle = "作战态势";
      this.isActive1 = true;
      this.isActive2 = false;
      this.isActive3 = false;
      this.isShowBtn = 1;
      this.one = true;
      this.two = false;
      // if (this.isShowBtn == 1) {
      //   this.isShowBtn = 2;
      //   console.log(">>>>>>>>>>>>>>>>>>" + this.isShowBtn);
      //   return;
      // }
      // if (this.isShowBtn == 2) {
      //   this.isShowBtn = 3;
      //   console.log(">>>>>>>>>>>>>>>>>>" + this.isShowBtn);
      //   return;
      // }
      // if (this.isShowBtn == 3) {
      //   this.isShowBtn = 1;
      //   console.log(">>>>>>>>>>>>>>>>>>" + this.isShowBtn);
      //   return;
      // }
    },
    changeBtn2() {
      this.isShowBtn = 3;
      this.one = true;
      this.two = false;
      this.screenTitle = "地形分布";
      this.isActive1 = false;
      this.isActive2 = true;
      this.isActive3 = false;
    },
    changeBtn3() {
      this.isActive1 = false;
      this.isActive2 = false;
      this.isActive3 = true;
      this.screenTitle = "地图数据";
      this.isShowBtn = 2;
      if (this.isShowBtn == 2) {
        this.one = false;
        this.two = true;
      }
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../assets/scss/index.scss";
</style>
